<template>
  <div :class="'van-after-border '+item.class">
    <van-field name="uploader" :label="item.label">
      <template #input>
        <van-uploader v-model="uploader" :accept="accept" :max-count="maxcount" :before-delete="delImgs" :after-read="uploadImgs" />
      </template>
    </van-field>
    <template #button>
      <van-button size="small" icon="photograph" type="primary">
        
      </van-button>
    </template>
    <van-popup v-model="show" closeable position="bottom" :style="{height:'100%'}" />
  </div>
</template>

<script>
import EleBase from './EleBase'
import axios from 'axios'
export default {
  name: 'EleIDCardORC',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    },
    accept: {
      type: String,
      default: 'image/*'
    },
    maxcount: {
      type: Number,
      default: 1
    },
    side: {
      type: String,
      default: 'face'
    }
  },
  data() {
    return {
      uploader: [],
      uploadUrl: 'api/files/ocr/idcard',
      deleteUrl: 'api/files/DelFile',
      headers: {
        // token: this.$store.state.account.token
      }
    }
  },
  computed: {
    errMsg() {
      let str = ''
      if (this.item.required) {
        str = '请输入' + this.item.label
      }
      return str
    },
    placeholder() {
      let str = ''
      if (this.item.placeholder) {
        str = this.item.placeholder
      } else if (this.item.label) {
        str = '请输入' + this.item.label
      }
      return str
    }
  },
  mounted () {
  },
  methods: {
    afterRead(file) {
    // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = 'uploading'
          v.message = '上传中...'
          this.uploadImg(v)
        })
      } else {
        file.status = 'uploading'
        file.message = '上传中...'
        this.uploadImg(file)
      }
    },
    // 上传
    uploadImgs(file) {
      debugger
      const formData = new FormData()
      formData.append('file', file.file)
      const url = window.g.WEBAPI_HOST_URL + this.uploadUrl + '?side=' + this.side
      axios
        .post(url, formData, {
          headers: this.headers
        })
        .then((res) => {
          if (res.code === 200) {
            debugger
            this.item.value = res.data
            if (file instanceof Array) {
              // 判断是否是数组
              file.map((v, i) => {
                v.status = 'success'
                v.message = ''
                v.url = res.data
              })
            } else {
              file.status = 'success'
              file.message = ''
              file.url = res.data
            }
          }
        })
        .catch(() => {
          this.$notify({
            type: 'warning',
            message: '上传失败'
          })
        })
    },
    /* 点击删除图片 */
    delImgs(file, name) {
      debugger
      // 标识, 使用的商品的索引
      // var sub = name.name
      // uploadImgs是要传递给后台的图片数组
      // name.index代表图片的索引
      this.uploader.splice(name.index, 1)
    }
  }
}
</script>
